import React from "react";
import {inject, observer} from "mobx-react";
import {Icon, Popover, Tools} from "weaver-mobile";
import {withRouter} from "react-router-dom";
import {WrAlertPage, WrOperateLog, WrShow} from "../../../public";
import {observable, toJS} from "mobx";

const getLabel = Tools.getLabel;

const programStatus = {//方案状态
    "": {label: getLabel(15808, "未设置"), color: "#D81D19"},
    "0": {label: getLabel(220, "草稿"), color: "#ACA207"},
    "1": {label: getLabel(19134, "审批中"), color: "#868686"},
    "2": {label: getLabel(236, "退回"), color: "#B916E8"},
    "3": {label: getLabel(508866, "已通过"), color: "#49D732"},
    "4": {label: getLabel(15808, "未设置"), color: "#D81D19"},
    "13": {label: getLabel(384564, "已禁用"), color: "#C8C8C8"}
};

const alertMessage = {
    1: {msg: getLabel(508557, "暂未开启任何考核周期")},
    2: {msg: getLabel(508609, "您暂时无权限查看此数据")},
    3: {msg: getLabel(509520, "暂未设置相应考核方案！"), icon: "no-data"},
}

/**
 * 考核方案-日志
 * jiansong 2019/11/8
 */
@inject("programViewStore")
@withRouter
@observer
export default class Log extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showPopover: false
        }
        this.store = this.props.programViewStore;
    }

    componentDidMount() {
        this.store.getLogList();
    }

    render() {
        const {
            loading, detail, form, showStatus, onFormChange, programDetail, addStatus, alertPageType, logStore
        } = this.store;
        return [
            <WrAlertPage show={!loading && alertPageType}
                         msg={alertPageType && alertMessage[alertPageType].msg}
                         icon={alertPageType && alertMessage[alertPageType].icon}/>,
            <WrShow show={detail.hasCycle && detail.hasRight && (!(form.programid == "" && !showStatus))}>
                <WrShow show={form.programid != "" && !addStatus}>
                    <div className="programView-content-title">
                        <span className="programView-content-title-name">
                            <span style={{color: "#4D7AD8"}} onClick={this.handleNameClick}>
                                {detail.programname}
                            </span>
                            <span>>{getLabel(32061, "操作日志")}</span>
                        </span>
                        <span className="programView-content-title-other">
                             <WrShow show={!addStatus && detail.programstatus == "1"}>
                                <span
                                    className="programView-content-title-audit"
                                    dangerouslySetInnerHTML={{__html: getLabel(129864, "待审批人") + "：" + detail.waitAuditName}}
                                />
                             </WrShow>
                             <WrShow show={!(!addStatus && detail.programstatus == "1")}>
                                <span/>
                            </WrShow>
                           <span className="programView-content-title-more">
                                    <Popover
                                        mask
                                        visible={this.state.showPopover}
                                        overlay={[
                                            (<Popover.Item key="0" value="scan">
                                                {getLabel(32061, "操作日志")}
                                            </Popover.Item>),
                                        ]}
                                        onSelect={this.handlePopoverSelect}
                                    >
                                         <span>{this.getStatus(detail.programstatus)}
                                             <Icon type="right"/>
                                        </span>
                                    </Popover>
                                </span>
                        </span>
                    </div>
                </WrShow>
            </WrShow>,
            <div className="roll">
                <WrOperateLog
                    logStore={logStore}
                    handleRefresh={this.handleRefresh}
                    handleEndReached={this.handleEndReached}
                />
            </div>
        ]
    }

    //处理
    handlePopoverSelect = () => {
        this.setState({
            showPopover: false
        })
        this.store.logCurrent = 1;
        this.store.getLogList(false);
    }

    //处理
    handleNameClick = () => {
        this.store.logStore.clearData();
        this.store.showtype = "detail";
    }

    //获取方案状态
    getStatus = (val) => {
        var status = programStatus[val];
        return status ? <span className="workrelate-status" style={{background: status.color}}>{status.label}</span> :
            <span/>
    }

    //下拉刷新
    handleRefresh = () => {
        const {logStore, getLogList} = this.store;
        this.store.logCurrent = 1;
        getLogList(false);
    }

    //底部加载
    handleEndReached = () => {
        const {getLogList} = this.store;
        this.store.logCurrent = this.store.logCurrent + 1;
        getLogList(true);
    }

}